<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        基础资料/承运商管理/<span style="color: #0098FF;">编辑承运商</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form :model="form" label-width="auto" :rules="rules">
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="承运商编码:" prop="Cr_encode">
                                    <el-input v-model="form.Cr_encode" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="公司名称:" prop="Cr_cp_name">
                                    <el-input v-model="form.Cr_cp_name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="承运商类型:" prop="Cr_type">
                                    <el-select v-model="form.Cr_type" placeholder="请选择">
                                        <el-option v-for="item in tableDataType" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_label" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="印业执照号码:" prop="Cr_bn_license_num">
                                    <el-input v-model="form.Cr_bn_license_num" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="税务登记号码:" prop="Cr_bus_license_num">
                                    <el-input v-model="form.Cr_bus_license_num" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="法人代表:" prop="Cr_tax_reg">
                                    <el-input v-model="form.Cr_tax_reg" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="区域:" prop="Cr_region">
                                    <el-cascader v-model="form.Cr_region" :options="Addressvalue" placeholder="请选择" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="公司地址:" prop="Cr_address">
                                    <el-input v-model="form.Cr_address" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="邮编:" prop="Cr_postcode">
                                    <el-input v-model="form.Cr_postcode" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="承运商状态:" prop="Cr_state">
                                    <el-switch v-model="form.Cr_state" inline-prompt size="large" />
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                            </el-col> -->
                        </el-row>
                        <el-row :gutter="20">
                            <el-form-item label="营业执照:" prop="Cr_bn_license">
                                <el-upload class="avatar-uploader" action="http://localhost:5261/api/Company/Upload"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.Cr_bn_license" :src="form.Cr_bn_license" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-form-item label="备注信息:" prop="Cr_information">
                                    <el-input v-model="form.Cr_information" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                            </el-col> -->
                        </el-row>

                    </div>
                    <p style="padding-right: 1050px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;联系人信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="姓名:" prop="Cr_name">
                                    <el-input v-model="form.Cr_name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="手机号码:" prop="Cr_phone">
                                    <el-input v-model="form.Cr_phone" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="部门:" prop="Cr_department">
                                    <el-input v-model="form.Cr_department" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="职位:" prop="Cr_posts">
                                    <el-input v-model="form.Cr_posts" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="E-mail:" prop="Cr_email">
                                    <el-input v-model="form.Cr_email" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="QQ:" prop="Cr_qq">
                                    <el-input v-model="form.Cr_qq" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1060px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;财务信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="发票抬头:" prop="Cr_io_title">
                                    <el-input v-model="form.Cr_io_title" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="纳税人识号:" prop="Cr_tp_identification">
                                    <el-input v-model="form.Cr_tp_identification" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开户行:" prop="Cr_bank">
                                    <el-input v-model="form.Cr_bank" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="开户名称:" prop="Cr_ao_name">
                                    <el-input v-model="form.Cr_ao_name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="银行账号:" prop="Cr_account">
                                    <el-input v-model="form.Cr_account" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1060px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;合同信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="是否签订合同:" prop="Cr_contract">
                                    <el-switch v-model="form.Cr_contract" inline-prompt size="large" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <!-- <el-col :span="8">
                                <el-form-item label="合同附件:">
                                    <el-upload v-model:file-list="fileList" class="upload-demo"
                                        action="http://localhost:5261/api/Company/Upload" multiple
                                        :on-preview="handlePreview" :on-remove="handleRemove"
                                        :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
                                        <el-button type="primary" link>
                                            上传附件
                                        </el-button>
                                        <template #tip>
                                            <div class="el-upload__tip">
                                                jpg/png files with a size less than 500KB.
                                            </div>
                                        </template>
                                    </el-upload>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <!-- <el-form-item>
                            <el-button>取消</el-button>
                            <el-button type="primary" @click="Update">保存</el-button>
                        </el-form-item> -->
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
export default {
    setup() {
        let imageUrl = ref('');
        let tableData = ref([]);
        let route = useRoute();
        let router = useRouter();
        let id = ref('');

        let form = reactive({
            Cr_encode: '',  //承运商编码
            Cr_cp_name: '',  //公司名称
            Cr_type: '',  //承运商类型
            Cr_bn_license_num: '',  //营业执照号码
            Cr_bus_license_num: '',  //税务登记号码
            Cr_tax_reg: '',  //法人代表
            Cr_region: '',  //区域
            Cr_address: '',  //公司地址
            Cr_postcode: '',  //邮编
            Cr_state: '',  //承运商状态(1:开启，0：关闭)
            Cr_bn_license: '',  //营业执照
            Cr_information: '',  //备注信息
            Cr_name: '',  //姓名
            Cr_phone: '',  //手机号码
            Cr_department: '',  //部门
            Cr_posts: '',  //职位
            Cr_email: '',  //邮箱
            Cr_qq: '',  //QQ
            Cr_io_title: '',  //发票抬头
            Cr_tp_identification: '',  //纳税识别号
            Cr_bank: '',  //开户行
            Cr_ao_name: '',  //开户名称
            Cr_account: '',  //银行账号
            Cr_contract: '',  //是否签订合同(0:否，1：是)
            Create_by: sessionStorage.getItem("empname"),  //创建人
            Create_time: '',  //创建时间
            Update_by: '',  //最后修改人
            Update_time: '2024-02-02',  //最后时间
            Is_del: 0, //是否删除（1：删除，0：未删除）
            Dv_num: 0,  //司机数量
            vc_num: 0,  //车辆数量
            Cr_id: 0,   //id
        })

        let tableDataType = ref([]);   //承运商类型
        let Addressvalue = ref([]);  //始发地和目的地的值

        onMounted(() => {
            id.value = route.query.id;
            showtype();
            Address();
            show();
        })

        const handleAvatarSuccess = (response, uploadFile) => {
            form.Cr_bn_license = URL.createObjectURL(uploadFile.raw);
        };

        const beforeAvatarUpload = (rawFile) => {
            if (rawFile.type !== 'image/jpeg') {
                ElMessage.error('上传的图片必须是 JPG 格式,请选择正确的图片!');
                return false;
            } else if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error('上传的图片大小不能超过 2MB!');
                return false;
            }
            return true;
        };

        const uploadAction = '/your/upload/url'; // 替换为你的上传 API 地址
        const uploadHeaders = { 'Content-Type': 'multipart/form-data' };


        function showtype() {   //承运商类型下拉框
            axios.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Car_type").then((res) => {
                tableDataType.value = res.data;
                console.log(tableDataType.value)
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Address() {   //区域
            axios.get("http://localhost:5261/api/Children/GetChildrens").then((res) => {
                Addressvalue.value = res.data;
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }

        function show() {  //根据id查询要显示的值
            axios.get("http://localhost:5261/api/Carrier_ment/GetCarrier_Ments_Update?Cr_id=" + id.value).then((res) => {
                form.Cr_encode = res.data[0].cr_encode;  //承运商编码
                form.Cr_cp_name = res.data[0].cr_cp_name;  //公司名称
                form.Cr_type = res.data[0].cr_type;  //承运商类型
                form.Cr_bn_license_num = res.data[0].cr_bn_license_num;  //营业执照号码
                form.Cr_bus_license_num = res.data[0].cr_bus_license_num;  //税务登记号码
                form.Cr_tax_reg = res.data[0].cr_tax_reg;  //法人代表
                form.Cr_region = res.data[0].cr_region.split('/'); //区域
                form.Cr_address = res.data[0].cr_address;  //公司地址
                form.Cr_postcode = res.data[0].cr_postcode;  //邮编
                if (res.data[0].cr_state == 1) {  //承运商状态
                    form.Cr_state = true;
                } else {
                    form.Cr_state = false;
                }
                //form.Cr_state=res.data[0].cr_state;  
                form.Cr_bn_license = res.data[0].cr_bn_license;  //营业执照
                form.Cr_information = res.data[0].cr_information;  //备注信息
                form.Cr_name = res.data[0].cr_name;  //姓名
                form.Cr_phone = res.data[0].cr_phone;  //手机号码
                form.Cr_department = res.data[0].cr_department;  //部门
                form.Cr_posts = res.data[0].cr_posts;  //职位
                form.Cr_email = res.data[0].cr_email;  //邮箱
                form.Cr_qq = res.data[0].cr_qq;  //QQ
                form.Cr_io_title = res.data[0].cr_io_title;  //发票抬头
                form.Cr_tp_identification = res.data[0].cr_tp_identification;  //纳税识别号
                form.Cr_bank = res.data[0].cr_bank;  //开户行
                form.Cr_ao_name = res.data[0].cr_encode;  //开户名称
                form.Cr_account = res.data[0].cr_account;  //银行账号
                if (res.data[0].cr_contract == 1) {  //是否签订合同(0:否，1：是)
                    form.Cr_contract = true;
                } else {
                    form.Cr_contract = false;
                }
                form.Create_by = res.data[0].create_by;  //创建人
                form.Create_time = res.data[0].create_time;  //创建时间
                form.Update_by = sessionStorage.getItem("empname"); //最后修改人
                form.Update_time = new Date().toISOString().slice(0, 10).toString();  //最后时间
                form.Is_del = res.data[0].is_del; //是否删除（1：删除，0：未删除）
                form.Dv_num = res.data[0].dv_num;  //司机数量
                form.vc_num = res.data[0].vc_num;  //车辆数量
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }
        const rules = reactive({
            Cr_encode: [
                { required: true, message: '承运商编码不能为空', trigger: 'blur' }
            ],
            Cr_cp_name: [
                { required: true, message: '公司名称不能为空', trigger: 'blur' }
            ],
            Cr_type: [
                { required: true, message: '承运商类型不能为空', trigger: 'blur' }
            ],
            Cr_bn_license_num: [
                { required: true, message: '营业执照号码不能为空', trigger: 'blur' }
            ],
            Cr_bus_license_num: [
                { required: true, message: '税务登记号码不能为空', trigger: 'blur' }
            ],
            Cr_tax_reg: [
                { required: true, message: '法人代表不能为空', trigger: 'blur' }
            ],
            Cr_region: [
                { required: true, message: '区域不能为空', trigger: 'blur' }
            ],
            Cr_address: [
                { required: true, message: '公司地址不能为空', trigger: 'blur' }
            ],
            Cr_postcode: [
                { required: true, message: '邮编不能为空', trigger: 'blur' }
            ],
            Cr_bn_license: [
                { required: true, message: '营业执照不能为空', trigger: 'blur' }
            ],
            Cr_state: [
                { required: true, message: '承运商状态不能为空', trigger: 'blur' }
            ],
            Cr_information: [
                { required: true, message: '备注信息不能为空', trigger: 'blur' }
            ],
            Cr_name: [
                { required: true, message: '姓名不能为空', trigger: 'blur' }
            ],
            Cr_phone: [
                { required: true, message: '手机号码不能为空', trigger: 'blur' }
            ],
            Cr_department: [
                { required: true, message: '部门不能为空', trigger: 'blur' }
            ],
            Cr_posts: [
                { required: true, message: '职位不能为空', trigger: 'blur' }
            ],
            Cr_email: [
                { required: true, message: '邮箱不能为空', trigger: 'blur' }
            ],
            Cr_qq: [
                { required: true, message: 'QQ不能为空', trigger: 'blur' }
            ],
            Cr_io_title: [
                { required: true, message: '发票抬头不能为空', trigger: 'blur' }
            ],
            Cr_tp_identification: [
                { required: true, message: '纳税识别号不能为空', trigger: 'blur' }
            ],
            Cr_bank: [
                { required: true, message: '开户行不能为空', trigger: 'blur' }
            ],
            Cr_ao_name: [
                { required: true, message: '开户名称不能为空', trigger: 'blur' }
            ],
            Cr_account: [
                { required: true, message: '银行账号不能为空', trigger: 'blur' }
            ],
            Cr_contract: [
                { required: true, message: '是否签订合同不能为空', trigger: 'blur' }
            ],
        });
        function Update() {
            form.Cr_id = id.value;
            if (form.Cr_state == true) {
                form.Cr_state = 1;
            } else {
                form.Cr_state = 0;
            }
            if (form.Cr_contract == true) {
                form.Cr_contract = 1;
            } else {
                form.Cr_contract = 0;
            }
            form.Cr_region = form.Cr_region[0] + "/" + form.Cr_region[1] + "/" + form.Cr_region[2]
            axios.post("http://localhost:5261/api/Carrier_ment/Update", form).then((res) => {
                if (res.data) {
                    ElMessage.success("修改成功！");
                    router.push('/CYSGL');
                } else {
                    ElMessage.success("修改失败！");
                }
            })
        }

        return {
            form,
            tableDataType,
            showtype,
            Addressvalue,
            handleAvatarSuccess,
            beforeAvatarUpload,
            uploadHeaders,
            uploadAction,
            Plus,
            imageUrl,
            tableData,
            id,
            Update,
            rules
        }
    }
}
</script>

<style scoped>
.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 930px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>